<template>
    <div class="toolBar">
        <div class="searchBox">
            <el-input
                class="searchInput"
                prefix-icon="el-icon-search"
                v-model="searchIP"
                placeholder="搜索IP..."
                clearable>
            </el-input>
            <el-button
                round
                icon="el-icon-search"
                type="primary"
                @click="handleLieClick">
                高级搜索...
            </el-button>
        </div>
        <div class="tableTool">
            <el-tooltip content="筛选列" placement="top" effect="dark">
                <el-popover
                    placement="left-start"
                    width="100"
                    trigger="click">
                    <el-checkbox-group 
                        id="myCheckboxGroup"
                        v-model="checkedArr" 
                        @change="handleChange">
                        <el-checkbox v-for="item in tableColumns"
                            :class="checkboxStyleFn(item)"
                            :label="item.label"
                            :key="item.prop" 
                            style="display:block;">
                            {{item.label}}
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-button
                        round
                        icon="el-icon-jk-lie"
                        slot="reference"
                        @click="handleLieClick">
                    </el-button>
                </el-popover>
            </el-tooltip>
        </div>
    </div>
</template>

<script>
import bus from './bus';
// import { filter } from 'minimatch';
import tabItems from './tabItems';

export default {
    name: 'toolBar',
    props: ['tableColumns'],
    data() {
        return {
            checkedArr: [],
            searchIP: '',
            SearchIPArrBak: [],
            searchJson: {}
        };
    },
    created() {
        this.initCheckedArr();
    },
    computed: {
        
    },
    methods: {
        handleLieClick(val) {
            this.$emit('getPaginationCurPage', val);
        },
        handleChange(val) {
            this.$emit('changeLie', val);
            
        },
        initCheckedArr() {
            this.tableColumns.forEach((element, index) => {
                if (element.isShow) {
                    this.checkedArr.push(element.label);
                }
            });
        },
        checkboxStyleFn(item) {
            if (item.isShow) {
                return 'testClass1';
            } else {
                return 'testClass2';
            }
        }
    },
    watch: {
        'searchIP': function(str, oldStr) {
            let _arr = [];
            let _flag = false;

            _arr = str.split(/\s+/);
            
            if (_arr.length > 0) {
                _arr = _arr.filter((item, index) => {
                    return item != '';
                });

                if (_arr.length == this.SearchIPArrBak.length) {
                    _flag = _arr.some((item, index) => {
                        return item != this.SearchIPArrBak[index];
                    });
                } else {
                    _flag = true;
                }
            } else if (!/\S/.test(str)) {
                this.SearchIPArrBak = [];
            }

            if (_flag) {
                this.SearchIPArrBak = _arr;
                
                this.$emit('getSearchIPArr', _arr);
            }
        }
    }
}
</script>

<style scoped>
    .toolBar {
        overflow: hidden;
        margin-bottom: 14px;
    }
    .searchBox {
        float: left;
        width: 600px;
    }
    .searchBox .searchInput {
        width: 300px;
        margin-right: 14px;
    }
    .tableTool {
        float: right;
    }
    #myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        
        color: #606266;
    }
    #myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
        background-color: #5fb878;
        border-color: #5fb878;
    }
    #myCheckboxGroup /deep/ .el-checkbox{
        margin-bottom: 8px;
    }
</style>